<template>
  <div>
    <!-- 插槽： 
    1.在子组件中需要自定义的地方使用 <slot /> 占位
    2.在父组件中使用子组件是，堪比变迁中间传入要自定义的结构
    好处：让组件变的更灵活
    具名插槽：
    1.在slot上使用 name 来区分不同的插槽
    2.在传入时使用 v-slot：插槽名来指定具体要分发的插槽
    3.v-slot 可以使用 # 来代替
     -->
    <MyDialog>
      <!-- # 是 v-slot: 的缩写 -->
      <template #header>
        <p>温馨提示</p>
      </template>
      <template #content>
        <h1>啊啊啊啊啊</h1>
        <h2>欧皇</h2>
        <h3>666</h3>
      </template>
      <!-- 2.在父组件中使用插槽时，template上通过-slot:插槽名="变量名" -->
      <!-- 业内很多人习惯叫scope变量名 -->
      <!-- <template #bottom="变量名"> -->
      <!-- obj变量只能在template中使用，超出这个范围就无法使用了，所以叫作用域变量 -->
      <template #footer="scope">
        <button>{{ scope.yes }}</button>
        <button>{{ scope.no }}</button>
      </template>
    </MyDialog>
    <MyDialog>
      <template #content>
        <h1>哦哦哦哦哦</h1>
        <h2>西巴儿</h2>
      </template>
    </MyDialog>
    <MyDialog></MyDialog>
  </div>
</template>

<script>
import MyDialog from "./components/MyDialog.vue";
export default {
  components: {
    MyDialog,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
</style>